<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>图片上传</title>

    <!-- Fonts -->
    <link href="{{asset('/css/bootstrap.css')}}" rel="stylesheet">
    <link href="{{asset('/css/app.css')}}" rel="stylesheet">
    <script src="{{asset('/js/jquery.min.js')}}"></script>
    <script src="{{asset('/js/bootstrap.min.js')}}"></script>
    <script src="{{asset('/js/holder.js')}}"></script>
    <!-- Styles -->
</head>
<body>
<div class="container">
    <div class="view bs-callout bs-callout-danger">
    <div class="row">
        <div class="col-xs-6">
            <h4>对比图预览</h4>
            <img data-src="holder.js/600x800/auto" id="img"
                 style="width: 600px;height: 800px"
                 class="featurette-image img-responsive center-block img-thumbnail"
                 alt="">

            <div id="rrr"></div>
        </div>
        <div class="col-xs-6">
            <h4>对比结果</h4>
                <img data-src="holder.js/600x800/auto" id="result"
                     style="width: 600px;height: 800px"
                     class="featurette-image img-responsive center-block img-thumbnail"
                     alt="">
        </div>
        <div class="col-xs-12" style="margin-top: 20px">
            <div class="row">
            <div class="col-xs-6">
                <input type="hidden" id="img-sn">
                    <label data-loading-text="上传中..."   class="btn btn-primary btn-lg btn-block"  for="exampleInputFile">上传对比图</label>
                    <input type="file" class="hidden" id="exampleInputFile">
            </div>
            <div class="col-xs-6">
                <button type="button" onclick="submit()" class="btn btn-primary btn-lg btn-block">获取对比结果</button>
            </div>
            </div>
        </div>
    </div>
    </div>
</div>
</body>
<script>
        var aaa = document.getElementById("img"); //获取显示图片的div元素
        var input = document.getElementById("exampleInputFile"); //获取选择图片的input元素
        if(typeof FileReader==='undefined'){
            alert("抱歉，你的浏览器不支持 FileReader");
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false); //如果支持就监听改变事件，一旦改变了就运行readFile函数。
        }
        function readFile() {
            var file = this.files[0]; //获取file对象
            //判断file的类型是不是图片类型。
            if (!/image\/\w+/.test(file.type)) {
                alert("文件必须为图片！");
                return false;
            }

            var reader = new FileReader(); //声明一个FileReader实例
            reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
            //最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
            reader.onload = function (e) {
                $(aaa).attr('src',this.result)
                var formData = new FormData();
                formData.append('file',file);
                formData.append('_token',"<?php echo csrf_token(); ?>");
                $.ajax({
                    url: "upload",
                    type: 'POST',
                    processData: false,//important
                    contentType: false,//important
                    dataType: 'json',//server response type
                    data: formData,
                    success:function (res) {
                        $('#img-sn').val(res)
                    }
                });
            }
        }
        function submit() {
            var sn = $('#img-sn').val();
            if(sn){
               // var $btn = $(this).button('loading')
                var formData = new FormData();
                formData.append('sn',sn);
                formData.append('_token',"<?php echo csrf_token(); ?>");
                $.ajax({
                    url: "comparison",
                    type: 'POST',
                    processData: false,//important
                    contentType: false,//important
                    dataType: 'json',//server response type
                    data: formData,
                    success:function (res) {
                   //     alert(res);

                       $('#result').attr('src',res.pic_file.substr(res.pic_file.length-35,35));
                        alert('对比相似度为：'+res.similarity);
                    }
                });
            }else{
                alert('请上传比对图片')
            }
        }

</script>
</html>
